<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="generator" content="Docusaurus v2.0.0-alpha.53">
<link rel="preconnect" href="https://www.google-analytics.com">
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41480445-1","auto"),ga("set","anonymizeIp",!0),ga("send","pageview")</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>

<title data-react-helmet="true">Tables - Pure</title>

<meta data-react-helmet="true" charset="utf-8"><meta data-react-helmet="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-react-helmet="true" property="og:title" content="Tables - Pure"><meta data-react-helmet="true" name="description" content="Simple CSS for HTML tables."><meta data-react-helmet="true" property="og:description" content="Simple CSS for HTML tables."><meta data-react-helmet="true" name="twitter:card" content="summary_large_image">

<link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200">


<link rel="stylesheet" href="/styles.e0d41c52.css">


<link rel="preload" href="/styles.59801a08.js" as="script">

<link rel="preload" href="/runtime~main.5e4f6629.js" as="script">

<link rel="preload" href="/main.596eb772.js" as="script">

<link rel="preload" href="/common.71de0887.js" as="script">

<link rel="preload" href="/2.5dabb085.js" as="script">

<link rel="preload" href="/252343f4.fa71467b.js" as="script">

</head>
<body>

<div id="__docusaurus">
<div id="layout"><a href="#menu" id="menuLink" class="menu-link"><span></span></a><div id="menu"><div class="pure-menu"><a class="pure-menu-heading" href="/">Pure</a><ul class="pure-menu-list"><li class="pure-menu-item"><a class="pure-menu-link" href="/start/">Get Started</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/layouts/">Layouts</a></li><li class="pure-menu-item menu-item-divided"><a class="pure-menu-link" href="/base/">Base</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/grids/">Grids</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/forms/">Forms</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/buttons/">Buttons</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/tables/">Tables</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/menus/">Menus</a></li><li class="pure-menu-item menu-item-divided"><a class="pure-menu-link" href="/tools/">Tools</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/customize/">Customize</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/extend/">Extend</a></li><li class="pure-menu-item"><a href="https://github.com/pure-css/pure/releases/" class="pure-menu-link">Releases</a></li></ul></div></div><div id="main" class="tables"><div class="header"><h1>Tables</h1><h2>Simple CSS for HTML tables.</h2></div><div class="content"><h2 id="default-table" class="content-subhead">Default Table<a href="#default-table" class="content-link" title="Heading anchor"></a></h2><p>To style an HTML table, add the <code>pure-table</code> classname. This class adds padding and borders to table elements, and emphasizes the header.</p><div class="example"><div><table class="pure-table">
    <thead>
        <tr>
            <th>#</th>
            <th>Make</th>
            <th>Model</th>
            <th>Year</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Honda</td>
            <td>Accord</td>
            <td>2009</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Toyota</td>
            <td>Camry</td>
            <td>2012</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Hyundai</td>
            <td>Elantra</td>
            <td>2010</td>
        </tr>
    </tbody>
</table></div><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">table</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-table&quot;</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">thead</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">th</span>&gt;</span>#<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">th</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">th</span>&gt;</span>Make<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">th</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">th</span>&gt;</span>Model<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">th</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">th</span>&gt;</span>Year<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">th</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">thead</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tbody</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>1<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Honda<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Accord<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>2009<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>2<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Toyota<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Camry<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>2012<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>3<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Hyundai<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Elantra<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>2010<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tbody</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">table</span>&gt;</span></code></pre></div></div></div><h2 id="bordered-table" class="content-subhead">Bordered Table<a href="#bordered-table" class="content-link" title="Heading anchor"></a></h2><p>To add horizontal and vertical borders to all cells, add the <code>pure-table-bordered</code> classname to the <code>&lt;table&gt;</code> element.</p><div class="example"><div><table class="pure-table pure-table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>Make</th>
            <th>Model</th>
            <th>Year</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Honda</td>
            <td>Accord</td>
            <td>2009</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Toyota</td>
            <td>Camry</td>
            <td>2012</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Hyundai</td>
            <td>Elantra</td>
            <td>2010</td>
        </tr>
    </tbody>
</table></div><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">table</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-table pure-table-bordered&quot;</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">thead</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">th</span>&gt;</span>#<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">th</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">th</span>&gt;</span>Make<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">th</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">th</span>&gt;</span>Model<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">th</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">th</span>&gt;</span>Year<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">th</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">thead</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tbody</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>1<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Honda<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Accord<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>2009<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>2<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Toyota<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Camry<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>2012<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>3<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Hyundai<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Elantra<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>2010<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tbody</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">table</span>&gt;</span></code></pre></div></div></div><h2 id="table-with-horizontal-borders" class="content-subhead">Table with Horizontal Borders<a href="#table-with-horizontal-borders" class="content-link" title="Heading anchor"></a></h2><p>If you prefer horizontal lines only, add the <code>pure-table-horizontal</code> classname to the <code>&lt;table&gt;</code> element.</p><div class="example"><div><table class="pure-table pure-table-horizontal">
    <thead>
        <tr>
            <th>#</th>
            <th>Make</th>
            <th>Model</th>
            <th>Year</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Honda</td>
            <td>Accord</td>
            <td>2009</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Toyota</td>
            <td>Camry</td>
            <td>2012</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Hyundai</td>
            <td>Elantra</td>
            <td>2010</td>
        </tr>
    </tbody>
</table></div><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">table</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-table pure-table-horizontal&quot;</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">thead</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">th</span>&gt;</span>#<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">th</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">th</span>&gt;</span>Make<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">th</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">th</span>&gt;</span>Model<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">th</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">th</span>&gt;</span>Year<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">th</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">thead</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tbody</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>1<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Honda<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Accord<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>2009<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>2<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Toyota<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Camry<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>2012<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>3<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Hyundai<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Elantra<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>2010<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tbody</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">table</span>&gt;</span></code></pre></div></div></div><h2 id="striped-table" class="content-subhead">Striped Table<a href="#striped-table" class="content-link" title="Heading anchor"></a></h2><p>Large tables are easier to parse visually if rows are easily distinguishable. Adding the <code>pure-table-odd</code> class name to every other <code>&lt;tr&gt;</code> element changes the background of the row and creates a zebra-styled effect.</p><p><b>Note:</b> In browsers which support the CSS3 <a href="http://caniuse.com/#search=nth-child"><code>nth-child</code> pseudo selector</a> a simpler approach can be used. The <code>pure-table-striped</code> classname can be added to the <code>&lt;table&gt;</code> element and the zebra-styled striping will happen automatically.</p><div class="example"><div><table class="pure-table">
    <thead>
        <tr>
            <th>#</th>
            <th>Make</th>
            <th>Model</th>
            <th>Year</th>
        </tr>
    </thead>
    <tbody>
        <tr class="pure-table-odd">
            <td>1</td>
            <td>Honda</td>
            <td>Accord</td>
            <td>2009</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Toyota</td>
            <td>Camry</td>
            <td>2012</td>
        </tr>
        <tr class="pure-table-odd">
            <td>3</td>
            <td>Hyundai</td>
            <td>Elantra</td>
            <td>2010</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Ford</td>
            <td>Focus</td>
            <td>2008</td>
        </tr>
        <tr class="pure-table-odd">
            <td>5</td>
            <td>Nissan</td>
            <td>Sentra</td>
            <td>2011</td>
        </tr>
        <tr>
            <td>6</td>
            <td>BMW</td>
            <td>M3</td>
            <td>2009</td>
        </tr>
        <tr class="pure-table-odd">
            <td>7</td>
            <td>Honda</td>
            <td>Civic</td>
            <td>2010</td>
        </tr>
        <tr>
            <td>8</td>
            <td>Kia</td>
            <td>Soul</td>
            <td>2010</td>
        </tr>
    </tbody>
</table></div><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">table</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-table&quot;</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">thead</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">th</span>&gt;</span>#<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">th</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">th</span>&gt;</span>Make<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">th</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">th</span>&gt;</span>Model<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">th</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">th</span>&gt;</span>Year<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">th</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">thead</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tbody</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tr</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-table-odd&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>1<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Honda<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Accord<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>2009<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>2<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Toyota<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Camry<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>2012<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tr</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-table-odd&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>3<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Hyundai<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Elantra<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>2010<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>4<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Ford<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Focus<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>2008<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tr</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-table-odd&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>5<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Nissan<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Sentra<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>2011<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>6<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>BMW<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>M3<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>2009<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tr</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-table-odd&quot;</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>7<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Honda<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Civic<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>2010<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>8<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Kia<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>Soul<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
            <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">td</span>&gt;</span>2010<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">td</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tr</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">tbody</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">table</span>&gt;</span></code></pre></div></div></div></div><div class="footer"><div class="legal pure-g"><div class="pure-u-1 u-sm-1-2"><p class="legal-license">This site is built with ❤️ using Pure v2.0.5<br>All code on this site is licensed under the <a href="https://github.com/pure-css/pure/blob/master/LICENSE">Yahoo BSD License</a> unless otherwise stated.</p></div><div class="pure-u-1 u-sm-1-2"><ul class="legal-links"><li><a href="https://github.com/pure-css/pure/">GitHub Project</a></li><li><a href="https://hackerone.com/yahoo/">Security Contact Info</a></li></ul><p class="legal-copyright">© 2014 - Present Yahoo! Inc. All rights reserved.</p></div></div></div></div></div>
</div>

<script src="/styles.59801a08.js"></script>

<script src="/runtime~main.5e4f6629.js"></script>

<script src="/main.596eb772.js"></script>

<script src="/common.71de0887.js"></script>

<script src="/2.5dabb085.js"></script>

<script src="/252343f4.fa71467b.js"></script>


</body>
</html>